<template>
 <div id="category">
    <!-- 搜索框 -->
    <van-search placeholder="商品搜索 万款好物供你选择" input-align='center' v-model="categorySearchData" />
    <!-- 侧边栏 -->
    <van-tree-select
    :items="items"
    :main-active-index.sync="activeIndex"
    height="calc(100vh - 104px)"
    @click-nav="changeRight"
    >
        <template slot="content">
            <van-grid :column-num="3">
                <van-grid-item v-for="(item,index) in subCategoryList" 
                :key="index" :icon="item.wap_banner_url" :text="item.name" 
                :to="'/categoryList/'+item.id" />
            </van-grid>
        </template>
    </van-tree-select>

    <tab-btn></tab-btn>
 </div>
</template>
<script>
import tabBtn from '@/components/tabBtn.vue'
import axios from 'axios'
import api from '@/assets/config/api.js'
 export default {
     data(){
         return{
            categorySearchData:'',
            activeIndex: 0,
            subCategoryList:[],
            data:{}
         }
     },
    async created(){
        let res=await axios.get(api.CatalogList)
        let data=res.data
        this.data=data.data
        this.subCategoryList =this.data.currentCategory.subCategoryList
        
     },
     computed:{
         items:function(){
             if(this.data.categoryList==undefined){
                 return []
             }else{
                 let arr=[]
                 this.data.categoryList.forEach((item,index)=>{
                     item.text=item.name
                     arr.push(item)
                 })
                 return arr
             }
         }
     },
     methods:{
         changeRight:function(index){
             this.activeIndex=index
         }
     },
     watch:{
         activeIndex:async function(){
             if(this.items.length!==0){
                 let id = this.items[this.activeIndex].id
                 let res=await axios.get(api.CatalogCurrent,{
                     params:{id}
                 })
                 this.subCategoryList=res.data.data.currentCategory.subCategoryList
             }else{
                 this.subCategoryList=[]
             }
         }
     },
     components:{
         tabBtn
     }
 }
 </script>
